import React from 'react';
import { LockOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons';
import { Button, Form, Input, Space, message } from 'antd';
import { useRef, useState } from 'react'
import Captcha from './Captcha';
// 导入手机接口
import { loginPhoneFn, verifyCaptcha, sendMsgtoPhone } from '@/api/login';
//

const Phonelogin = () => {
    const [key, setKey] = useState('');
    // 定义初始的时间
    let [time, setTime] = useState(10);
    const onFinish = (values) => {
        console.log('value', values);
    }
    const ref1 = useRef();
    // 获取表单的实例
    const formRef = useRef();
    // console.log('formRef', formRef);
    const getKey = (key) => {
        setKey(key)
    }

    // 定义定时器
    let timer = null;

    // 定义发送短信方法
    const sendMsgFn = () => {
        // 验证手机号和验证码是否有值(利用表单实例上的方法 validateFields进行校验)
        // console.log('formRef', formRef);
        formRef.current.validateFields(['mobile', 'captcha']).then(values => {
            // 这一步, 只保证了手机号和验证码非空,但是换需要判断验证码是否正确?
            // 对验证码进行校验
            verifyCaptcha({
                key: key,
                captcha: values.captcha
            }).then(res => {
                console.log('验证码校验接口', res);
                if (res.data.errNo == 0) {
                    // 说明验证码验证通过了
                    // 开启倒计时
                    timer = setInterval(() => {
                        // console.log(time);
                        time--;
                        if (time == 0) {
                            time = 10
                            clearInterval(timer)
                        };
                        setTime(time)
                    }, 1000);

                    // 调用短信验证码接口
                    sendMsgtoPhone({
                        token: res.data.context.token,
                        mobile: values.mobile,
                        type: 0
                    }).then(res1 => {
                        console.log('发送短信接口', res1);
                        // 返回requestId
                    })

                } else {
                    // 验证码验证失败
                    //01: 做一个提示(axios全局已经做过验证码)
                    //02: 重新更新验证码
                    ref1.current.initCaptchaFn()
                }
            }).catch(e => {

            })

        }).catch(err => {
            console.log('校验失败');
        })

    }


    // 点击登录
    const loginFn = () => {
        // 做一个表单校验
        // loginPhoneFn({
        //     code: '',// 短信验证码
        //     requestId: '',
        //     mobile: ''
        // }).then(res => {


        // })

    }

    return (
        <div>
            <Form
                name="normal_login"
                className="login-form"
                onFinish={onFinish}
                // 方法2: 获取form 
                ref={formRef}
            >
                <Form.Item
                    name="mobile"
                    rules={[
                        {
                            required: true,
                            message: '输入手机号!',
                        },
                        {
                            pattern: /^1[3-9]\d{9}$/,
                            message: '手机号输入有误!!!'
                        }
                    ]}
                >
                    <Input size='large' prefix={<UserOutlined className="site-form-item-icon" />} placeholder="手机号" />
                </Form.Item>
                <Space>
                    <Form.Item
                        name="captcha"
                        rules={[
                            {
                                required: true,
                                message: '输入图形验证码!',
                            },
                        ]}
                    >
                        <Input
                            prefix={<KeyOutlined className="site-form-item-icon" />}
                            type="text"
                            placeholder="验证码"
                            size='large'

                        />
                    </Form.Item>
                    <Form.Item>
                        {/* 验证码组件 */}
                        <Captcha ref={ref1} getKey={getKey}></Captcha>
                    </Form.Item>
                </Space>
                <Space>
                    <Form.Item
                        name="code"
                        rules={[
                            {
                                required: true,
                                message: '输入短信验证码!',
                            },
                        ]}
                    >
                        <Input
                            prefix={<KeyOutlined className="site-form-item-icon" />}
                            type="text"
                            placeholder="短信验证码"
                            size='large'

                        />
                    </Form.Item>
                    <Form.Item>
                        {/* 验证码组件 */}
                        <Button size='large' disabled={time != 10 ? true : false} onClick={sendMsgFn}>{time != 10 ? time + 's' : '发送验证码'}</Button>
                    </Form.Item>
                </Space>


                <Form.Item>
                    <Button onClick={loginFn} block type="primary" size='large' htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}

export default Phonelogin;
